<template>
    <div class="m-GenBox">
        <div class="u-flex_row">
            <div class="u-cardBox first">
                <div class="title">一级指标对比</div>
                <div class="cardMain">
                    <div class="group">
                        <div class="progressBox" v-for="(item,index) in progressList" :key="index">
                            <el-progress type="circle" :width="106" :stroke-width='12' :percentage="item.value" :color="item.color"></el-progress>
                            <div class="name">{{item.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="u-cardBox second">
                <div class="title">1111</div>
                <div class="cardMain">
                    <u-barEchart
                        :keyId="'third1'"  :barWidth="20"
                        :legend="legendList1" :list="list1" disLegend :xAxisName="'负担值'">
                    </u-barEchart>
                </div>
            </div>
        </div>
        <div class="u-flex_row">
            <div class="u-cardBox third">
                <div class="title">字体不倾斜</div>
                <div class="cardMain">
                    <u-barEchart
                        :keyId="'third2'" 
                        :legend="legendList1" :list="list1" fontNomal>
                    </u-barEchart>
                </div>
            </div>
        </div>
        <div class="u-flex_row">
            <div class="u-cardBox third">
                <div class="title">无区分线 有比对</div>
                <div class="cardMain">
                    <u-barEchart
                        :keyId="'third3'" 
                        :legend="legendList1" :list="list1">
                    </u-barEchart>
                </div>
            </div>
        </div>
        <div class="u-flex_row">
            <div class="u-cardBox third">
                <div class="title">有区分线 有比对</div>
                <div class="cardMain">
                    <u-barEchart
                        :keyId="'third4'" 
                        :legend="legendList1" :list="list1" :markVal='2'>
                    </u-barEchart>
                </div>
            </div>
        </div>
        <div class="u-flex_row">
            <div class="u-cardBox third">
                <div class="title">两个一组</div>
                <div class="cardMain">
                    <u-barEchart
                        :keyId="'third5'" 
                        :legend="legendList2" :list="list2">
                    </u-barEchart>
                </div>
            </div>
        </div>
        <div class="u-flex_row">
            <div class="u-cardBox third">
                <div class="title">有区分线 有比对 有单柱</div>
                <div class="cardMain">
                    <u-barEchart
                        :keyId="'third6'" 
                        :legend="legendList3" :list="list3" :markVal='4' hasDiff>
                    </u-barEchart>
                </div>
            </div>
        </div>
        <div class="u-flex_row">
            <div class="u-cardBox third">
                <div class="title">有单柱 更改y轴名称</div>
                <div class="cardMain">
                    <u-barEchart position="left"
                        :keyId="'third7'" 
                        :legend="legendList4" :list="list4" :yAxisName="'负担值（分）'" hasDiff>
                    </u-barEchart>
                </div>
            </div>
        </div>
        <div class="u-flex_row">
            <div class="u-cardBox third">
                <div class="title">加曲线</div>
                <div class="cardMain">
                    <u-barEchart ref="third8"
                        :keyId="'third8'" 
                        :legend="legendList5" :list="list5" hasDiff hasLine>
                    </u-barEchart>
                </div>
            </div>
        </div>
        <div class="u-flex_row">
            <div class="u-cardBox third">
                <div class="title">无背景</div>
                <div class="cardMain">
                    <u-barEchart
                        :keyId="'third9'" 
                        :legend="legendList5" :list="list5" :ishasBackground="false">
                    </u-barEchart>
                </div>
            </div>
        </div>
        <div class="u-flex_row">
            <div class="u-cardBox third">
                <div class="title">横向</div>
                <div class="cardMain">
                    <u-barEchart ref="xxx"
                        :keyId="'third10'" 
                        :legend="legendList6" :list="list6" :xAxisType="'value'" isStack :ishasBackground="false" showLabel>
                    </u-barEchart>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'thisyear',
    data(){
        return{
            progressList:[
                { value:80,color:'#fdb628',name:'学校创新发展' },
                { value:40,color:'#6374f7',name:'教师专业能力' },
                { value:10,color:'#00cd86',name:'学生综合素质发展' },
            ],
            legendList1:[
                {name:'评价内容',min:2,max:5,color:'#00cd86',itemcolor:['#23c5a2','#2dd681']},
                {name:'低分评价内容',min:0,max:2,color:'#ff7b12',itemcolor:['#ff7b12','#ff9600'],isSign: true},
            ],
            list1:[
                {name:"学生特质",value:[4]},
                {name:"教师行为",value:[2.5]},
                {name:"领导风格",value:[2]},
                {name:"学校环境",value:[1]},
                {name:"师德修养",value:[3.5]},
                {name:"学生特质3",value:[4]},
                {name:"学生特质4",value:[4.6]},
            ],
            legendList2:[
                {name:'小学',color:'#00cd86',itemcolor:['#23c5a2','#2dd681']},
                {name:'初中',color:'#4ca0ff',itemcolor:['#0078ff','#4ca0ff']},
            ],
            list2:[
                {name:"学校创新发展",value:[4,3]},
                {name:"教师专业能力",value:[2,3]},
                {name:"学生综合素质发展",value:[0,3]},
            ],
            legendList3:[
                {name:'钱塘新区',key:1,color:'#4ca0ff',itemcolor:['#0078ff','#4ca0ff'],isSign: true},
                {name:'正常',min:2,max:5,color:'#00cd86',itemcolor:['#23c5a2','#2dd681']},
                {name:'需关注',min:0,max:2,color:'#ff7b12',itemcolor:['#ff7b12','#ff9600'],isSign: true},
            ],
            list3:[
                {name:"钱塘新区",key:1,value:[4]},
                {name:"学生特质",value:[4]},
                {name:"教师行为",value:[2.5]},
                {name:"领导风格",value:[2]},
                {name:"学校环境",value:[1]},
                {name:"师德修养",value:[3.5]},
                {name:"学生特质3",value:[4]},
                {name:"学生特质4",value:[4.6]},
            ],
            legendList4:[
                {name:'2018年',key:1,color:'#4ca0ff',itemcolor:['#0078ff','#4ca0ff']},
                {name:'2019年',key:2,color:'#00cd86',itemcolor:['#23c5a2','#2dd681']},
                {name:'2020年',key:3,color:'#ff7b12',itemcolor:['#ff7b12','#ff9600']},
            ],
            list4:[
                {name:"2018年",key:1,value:[4]},
                {name:"2019年",key:2,value:[3]},
                {name:"2020年",key:3,value:[2.5]},
            ],
            legendList5:[
                {name:'得分率',key:1,color:'#4ca0ff',itemcolor:['#0078ff','#4ca0ff']},
                {name:'区分度',type:'Line',color:'#00cd86'},
            ],
            list5:[
                {name:"2018年",key:1,value:[4],lineval:[3]},
                {name:"2019年",key:1,value:[3],lineval:[2]},
                {name:"2020年",key:1,value:[2.5],lineval:[1]},
            ],
            legendList6:[
                {name:'3小时以上',color:'#4ca0ff',itemcolor:['#4ca0ff','#4ca0ff']},
                {name:'2-3小时',color:'#00cd86',itemcolor:['#00cd86','#00cd86']},
                {name:'1-2小时',color:'#ff7b12',itemcolor:['#ff7b12','#ff7b12']},
                {name:'1小时以下',color:'#7F9BFB',itemcolor:['#7F9BFB','#7F9BFB']},
            ],
            list6:[
                {name:"前进中学",value:[20,30,40,10]},
                {name:"义蓬中学",value:[20,30,20,30]},
                {name:"行为中学",value:[10,10,40,40]},
            ],
            visualMap:{},
        }
    },
    created(){
        this.getInit()
    },
    mounted(){
        this.getChart()
    },
    methods:{
        getInit(){
            
        },
        getChart(){
            let ref = this.$refs.third8
            if(!ref) return false
            let list= ref.list
            let tooltip = {
                formatter: (params)=>{
                    let item = params[0]
                    let index = item.dataIndex
                    return item.name+'<br>'+
                        '<span><i style="background:#4ca0ff"></i>得分率：'+item.value+'</span><br>'+
                        '<span><i style="background:#00cd86"></i>区分度：'+params[1].value+'</span>'
                },
                extraCssText: 'box-shadow: 0 1px 10px rgba(59, 100, 168, 0.2); width: 160px; min-height:90px;'
            }
            ref.setChart({tooltip})
        },

    },
}
</script>
<style lang="scss" scoped>
.u-cardBox {
    &.first{
        width: 504px; height: 440px;
        .group{
            display: flex;
            justify-content: space-between;
            text-align: center;
        }
        .progressBox{
            width: 33.33%;
            .name{
                font-size: 16px; color: #747e93;
                margin-top: 22px;
            }
        }
    }
    &.second{
        flex: 1; height: 440px;
        display: flex;
        flex-direction: column;
        margin-left: 24px;
        .cardMain{
            width: 100%;
            flex: 1;
        }
    }
    &.third{
        flex: 1; height: 480px;
        display: flex;
        flex-direction: column;
        .cardMain{
            width: 100%;
            flex: 1;
        }
    }
}
</style>
